<template>
  <CloudDialog
    v-model:visible="visible"
    title="日志"
    :loading="loading"
    :mask-closable="false"
    dialog-class="log-scroll hide-header"
    body-class="!pb-0"
    :before-open="handleOpen"
    :before-close="handleCancel">
    <highlightjs
      ref="el"
      language="accesslog"
      :autodetect="false"
      :code="txtContent">
    </highlightjs>
    <template #footer>
      <a-button class="ml-6 w-[74px]" @click="handleCancel"> 关闭 </a-button>
      <a-button :disabled="!isEnd" @click="handleDownload">下载日志</a-button>
    </template>
  </CloudDialog>
</template>
<script lang="ts" setup>
import type { LicenseListItem } from '@/apis/model/license'
import { getApiCertApi, getApiCertApplyLogApi } from '@/apis/modules/license'
import hljs from 'highlight.js/lib/core'
import accesslog from 'highlight.js/lib/languages/accesslog'
hljs.registerLanguage('accesslog', accesslog)
const visible = defineModel<boolean>('visible', { required: true })
const record = defineModel<
  { id: string; site_domain: string } | LicenseListItem
>('record', {
  required: true
})
// 刷新表格事件
interface IEmit {
  (event: 'refresh-row', row: LicenseListItem): void
}
const emit = defineEmits<IEmit>()
const { el, loading, isEnd, request, txtContent } = useTerminal({
  api: getApiCertApplyLogApi,
  body: { id: record.value?.id },
  immediate: false
})
/**
 * 轮询逻辑
 */
let timer: NodeJS.Timer
const clear = watch(
  () => isEnd.value,
  (val) => {
    if (val) {
      clearInterval(timer)
      clear()
    }
  }
)
watchEffect(() => {
  if (visible.value && !isEnd.value) {
    pollMessage()
  } else {
    clearInterval(timer)
    clear()
  }
})
async function pollMessage() {
  timer = await setInterval(() => {
    clear()
    request({ id: record.value.id })
  }, 3 * 1000)
}
const handleOpen = () => {
  request({ id: record.value.id })
}
const handleCancel = () => {
  visible.value = false
  txtContent.value = ''
}
watch(
  () => isEnd.value,
  async (v) => {
    if (v && ![1, 2].includes(record.value?.apply_result)) {
      const res = await getApiCertApi({ id: record.value.id! })
      if (!res) return
      emit('refresh-row', res)
    }
  },
  {
    immediate: true
  }
)
watch(
  () => txtContent.value,
  (val) => {
    setTimeout(() => {
      if (val) {
        const element = document.querySelector('code')
        // 假设你有一个元素的引用，比如通过 document.getElementById 或其他方式获取
        element?.scrollTo({
          top: element.offsetHeight,
          behavior: 'smooth'
        })
      }
    }, 50)
  }
)
const handleDownload = () => {
  useDownloadTxt(txtContent.value, record.value?.site_domain)
}
</script>

<style lang="less">
.log-scroll {
  @apply !min-w-1000px !w-auto  !max-w-[60%];
  .arco-modal-body {
    overflow: hidden !important;
  }
}
pre {
  height: 520px;
  max-height: 520px;
  overflow: auto !important;
  margin: 0;
}

pre code.hljs {
  display: block;
  overflow: auto;
  padding: 5px 10px;
  color: #c9d1d9;
  background: #0d1117;
  height: inherit !important;
  line-height: initial !important;
}
</style>
